<template>
  <Authority :value="auth">
    <a-button
      :type="small ? 'link' : 'default'"
      :size="small ? 'small' : 'middle'"
      :loading="loading"
      @click.stop="handleClick"
    >
      <template #icon>
        <Icon icon="lucide:x" />
      </template>
      {{ text }}
    </a-button>
  </Authority>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { Icon } from '@/components/Icon';
  import { propTypes } from '@/utils/propTypes';
  import { Authority } from '@/components/Authority';

  export default defineComponent({
    name: 'AButtonCancel',
    components: { Authority, Icon },
    props: {
      auth: propTypes.string,
      small: propTypes.bool,
      text: propTypes.string.def('取消'),
      loading: propTypes.bool.def(false),
    },
    emits: ['click'],
    setup(_, { emit }) {
      const handleClick = () => {
        emit('click');
      };

      return {
        handleClick,
      };
    },
  });
</script>
